import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Input, Modal, Select } from 'antd';

const dateFormat = 'YYYY-MM-DD';
const FormItem = Form.Item;
const R = require("ramda");


const portDetail = Form.create()(class PortDetail extends React.Component{
        constructor(props){
		    super(props);
		    this.state = { 
                open: false, 
                disabled: false 
            }
	    }

        handleOpen = (disabled) => {
            this.setState({ open: true, disabled });
        }
    
        handleCancel = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleConfirm = () =>{
            this.props.form.validateFields({ force: true },(errors, values) => {
                if (errors) return; 
                    values.id = this.props.port.dataSource && this.props.port.dataSource.id ? this.props.port.dataSource.id : null;

                    if(!R.equals(R.pick(Object.keys(values),this.props.port.dataSource),values)){
                        this.props.dispatch({
                            type: R.isNil(values.id) ? 'port/addPort' : 'port/updatePort',
                                payload:{
                                    ...values,
                                    onSuccess:() =>{
                                        this.handleCancel();
                                        if(this.props.refreshList) this.props.refreshList();
                                    }
                                }
                            })
                        }else this.handleCancel();
                    });
        }

    render(){
        let dataSource = this.props.port.dataSource ? this.props.port.dataSource : {};
        let formItemLayout = { labelCol:{ span: 8}, wrapperCol:{ span:14}};
        let formItemLayout2 = { labelCol:{ span: 4}, wrapperCol:{ span:18}};
        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];


        return(
            <Modal maskClosable={false} visible={this.state.open} title={"港口详情"} confirmLoading={this.props.loading} onCancel={ this.handleCancel.bind(this)} footer={footer}>
                <Form>
                            <FormItem {...formItemLayout} label="港口编码" hasFeedback>
                                {getFieldDecorator('portCode', {
                                    rules: [{
                                        required: true, message: '请输入港口编码',
                                    }],
                                    initialValue: dataSource.portCode
                                })(
                                    <Input disabled={this.state.disabled} maxLength="20"/>
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} label="港口中文名称" hasFeedback>
                                {getFieldDecorator('portName', {
                                    rules: [{
                                        required: true, message: '请输入港口中文名称',
                                    }],
                                    initialValue: dataSource.portName
                                })(
                                    <Input disabled={this.state.disabled} maxLength="48"/>
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} label="港口英文名称" hasFeedback>
                                {getFieldDecorator('portNameEn', {
                                    rules: [{
                                        required: false, message: '请输入港口英文名称',
                                    }],
                                    initialValue: dataSource.portNameEn
                                })(
                                    <Input disabled={this.state.disabled} maxLength="48"/>
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} label="港口类型" hasFeedback>
                                {getFieldDecorator('portType', {
                                    rules: [{
                                        required: true, message: '请输入港口类型',
                                    }],
                                    initialValue: dataSource.portType
                                })(
                                    <Select disabled={this.state.disabled}>
                                        <Select.Option value="1">海运港口</Select.Option>
                                        <Select.Option value="2">空运港口</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                </Form>
            </Modal>
            )
        }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.port, port: state.port
    };
}

export default connect(mapStateToProps)(portDetail);